<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
    <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
    <ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <!-- 头部 s -->
                <div class="d-flex jc-center title_wrap">
                    <div class="zuojuxing"></div>
                    <div class="youjuxing"></div>
                    <div class="guang"></div>
                    <div class="d-flex jc-center">
                        <div class="title">
                            <span class="title-text">现货交易指标系统</span>
                        </div>
                    </div>
                    <div class="timers">
                        <!-- {{ dateYear }} {{ dateWeek }} {{ dateDay }} -->
                        <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i>
                    </div>
                </div>
                <!-- 头部 e-->
                <!-- 内容  s-->
                <!-- <router-view></router-view> -->

                <div class="login">
                    <div class="title1">登录</div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item class="fitem" label="用户名" prop="loginName">
                            <el-input v-model="ruleForm.loginName"></el-input>
                        </el-form-item>
                        <el-form-item class="fitem" label="密码" prop="password">
                            <el-input v-model="ruleForm.password"></el-input>
                        </el-form-item>
                        <!-- <el-form-item class="fitem" label="验证码" prop="password">
                            <el-input v-model="ruleForm.password">
                                <template slot="append">ANV2</template>
                            </el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button :loading="loginLoading" class="btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 内容 e -->
            </div>
        </div>
        <Setting ref="setting" />
    </ScaleScreen>
    <!-- </div> -->
</template>

<script>
import { formatTime } from "@/utils/index.js";
import Setting from "../setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import { loginApi } from "@/api/login";
import router from '@/router'

export default {
    components: { Setting, ScaleScreen },
    data() {
        return {
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            rules: {
                loginName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            ruleForm: {
                loginName: 'zhangsan',
                password: '1234567'
            },
            loginLoading: false,
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    computed: {},
    created() { },
    mounted() {
        this.timeFn();
        this.cancelLoading();
    },
    beforeDestroy() {
        clearInterval(this.timing);
    },
    methods: {
         submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            console.log(this.ruleForm);
            this.loginLoading = true
            const res = await loginApi(this.ruleForm)
            this.loginLoading = false
            console.log(res,'res-----');
            localStorage.setItem('userInfo', JSON.stringify(res))
            if (res.loginFlag) {
                router.push('/home')
            }else {
                this.$message({
                  message: res.loginMessage,
                  type: "error",
                });
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
        showSetting() {
            this.$refs.setting.init();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), "HH: mm: ss");
                this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
        cancelLoading() {
            let timer = setTimeout(() => {
                this.loading = false;
                clearTimeout(timer);
            }, 500);
        },
    },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
